<template>
  <div class="v-control v-button-container">
    <el-button
        :size="props.size"
        :type="props.type"
        :round="props.round"
        :loading="props.loading"
        :disabled="props.disabled"
        :color="props.color"
        :dark="props.dark"
        :icon="props.icon"
        :link="props.link"
    >
      <template v-if="props.text">
        {{ props.text }}
      </template>
      <template v-else>
        <slot name="buttonSlot"></slot>
      </template>
    </el-button>
  </div>
</template>
<script lang="ts" setup>

const props = defineProps({
  size: {
    type: String,
    default: 'default'
  },
  type: {
    type: String,
    default: 'default'
  },
  link: {
    type: Boolean,
    default: false
  },
  round: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  text: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: ''
  },
  dark: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    default: ''
  },
  loadingIcon: {
    type: String,
    default: '加载中'
  },
})
</script>
<style scoped lang="scss">
.v-button-container {
  margin-right: 10px;
  display: inline-block;
}
</style>
